<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" class="navbar" />
    <div class="carlist">
      <van-swipe-cell class="list" v-for="item in data" :key="item.goods_id">
        <van-checkbox checked-color="#ca3737" class="box" v-model="item.isCheck"></van-checkbox>
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
          class="goods-card"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
        </template>
      </van-swipe-cell>

      <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit" class="order">
        <van-checkbox checked-color="#ca3737" v-model="isAllChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { cartList, deleteAction, submitAction } from "@/api/home";
import { Dialog } from "vant";
import { Toast } from "vant";
import Vue from "vue";
Vue.use(Dialog);

export default {
  data() {
    return {
      data: [],
      goods_id: "",
      paymoney: 0,
      // buyarr:[]
      buylist: []
    };
  },
 
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    del(item) {
      deleteAction({
        id: item.id
      }).then(res => {
        console.log(res);
      });
      Dialog.confirm({
        message: "确定要删除该商品吗"
      })
        .then(() => {
          // on confirm
          var i = this.data.findIndex(el => el.goods_id == item.goods_id);
          this.data.splice(i, 1);
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {
      var buylist = this.data.filter(el => el.isCheck == true);
      // console.log(buylist);
      this.buylist = buylist;
      var obj = {
        buylist:buylist,
        total:this.paymoney
      }
      this.$store.commit("topay", obj);
      var id1 = buylist[0] ? buylist[0].goods_id : "";
      var id2 = buylist[1] ? buylist[1].goods_id : "";
      var id3 = buylist[2] ? buylist[2].goods_id : "";
      var id4 = buylist[3] ? buylist[3].goods_id : "";
      var id5 = buylist[4] ? buylist[4].goods_id : "";
      var money = 0;
      for (var i = 0; i < buylist.length; i++) {
        money += buylist[i].number * buylist[i].retail_price;
      }
      console.log(money);
      this.paymoney = money;
      submitAction({
        allPrise: this.paymoney,
        goodsId: id1,
        id2,
        id3,
        id4,
        id5,
        openId: 17516331686
      }).then(res => {
        console.log(res);
      });
      if (buylist.length == 0) {
        Toast("您还未选择要购买的商品");
      } else {
        this.$router.push({
          path: "/cart/pay",
          query: { total: this.paymoney, buylist: this.buylist }
        });
      }
    }
  },
  computed: {
    isAllChecked: {
      get() {
        // 进入页面，当购物车的长度为0时，全选不能选中
        if (this.data.length == 0) {
          return false;
        } else {
          return this.data.every(el => el.isCheck); //若复选框都被选中，返回true，只要有一个未选中，返回false
        }
      },
      set(val) {
        this.data.forEach(el => {
          el.isCheck = val;
        });
      }
    },
    total() {
      return this.data.reduce((cur, val) => {
        if (val.isCheck) {
          return cur + val.retail_price * val.number;
        } else {
          return cur;
        }
      }, 0);
    }
  },
  created() {
    cartList({
      openId: 17516331686
    }).then(res => {
      for (var i = 0; i < res.data.length; i++) {
        res.data[i].isCheck = false;
      }
      this.data = res.data;
    });
  }
};
</script>

<style lang="scss" scoped>
body,
html {
  height: 80rem;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.carlist {
  margin-top: 1.493333rem;
  .list {
    position: relative;
    margin-top: 0.266667rem;
    background-color: #fff;
    .box {
      position: absolute;
      top: 50%;
      left: 0.266667rem;
      transform: translate(0, -50%);
      width: 0.533333rem;
      height: 0.533333rem;
    }
    .goods-card {
      position: relative;
      width: 8.933333rem;
      margin: 0;
      margin-left: 1.066667rem;
      background-color: #fff;
      .van-card__bottom {
        position: relative;
        bottom: 0.4rem;
        .van-card__num {
          font-size: 0.426667rem;
        }
        .van-card__price {
          position: absolute;
          left: 0;
        }
      }
      .van-card__title {
        font-size: 0.373333rem;
        margin-top: 0.533333rem;
        text-align: left;
      }
      span {
        width: 0.533333rem;
        height: 0.533333rem;
        margin: 0.133333rem;
      }
    }
    .delete-button {
      height: 100%;
    }
  }
  .order {
    position: fixed;
    bottom: 1.333333rem;
  }
}
</style>